import { intl } from '@/utils';
import Popup from 'devextreme-react/popup';
import React from 'react';
import { useState } from 'react';

// 显示对话框参数
export interface ProDialogShowParams {
  args: any, // 打开对话框参数
  okCallback?: (e: any) => void; // OK按钮回调
}
export interface ProDialogProps {
  onOK: (v: string, tag?: any) => void;
  onCancel?: () => void;
}
export interface SizeProp {
  width?: Number | String,
  height?: Number | String,
}

const ProDialog: React.FC<any & ProDialogProps> = React.forwardRef((props: any & ProDialogProps, ref) => {
  const { onOK, onCancel, width, height, ...restProps } = props;
  const [size, setSize] = useState<SizeProp>({ width, height });

  return (
    <>
      <Popup
        {...restProps}
        ref={ref}
        minWidth={500}
        {...size}
        dragOutsideBoundary={true}
        hideOnOutsideClick={true}
        // resizeEnabled={true}
        onResizeEnd={(e) => {
          setSize({ width: e.width, height: e.height });
        }}
        toolbarItems={[
          {
            widget: 'dxButton',
            toolbar: 'bottom',
            location: 'after',
            options: {
              text: intl('pub.cancel', '取消'),
              onClick: () => onCancel(),
            },
          },
          {
            widget: 'dxButton',
            toolbar: 'bottom',
            location: 'after',
            options: {
              text: intl('pub.ok', '确定'),
              type: 'default',
              // disabled: (!curNodeData),
              onClick: () => onOK()
            },
          },
        ]}
      />
    </>
  );
});

export default ProDialog